<template>
    <view 
        class="zz-customHeader_20200806"
        :style="[{'height':`${customBarH*2}rpx`},{'padding-top':`${statusBarH*2}rpx`}]">
        <!--  -->
        <view 
            :style="[{'padding-top':`${(customTopH-statusBarH)*2}rpx`}]"
            class="content">
            <!-- 标题 -->
            <view class="content_title">
                <slot name="title"></slot>
                <!-- 图标 -->
                <slot name="iconArea"></slot>
            </view>

        </view>
    </view>
</template>
<script>
export default {
    props:{
        
    },
    data(){
        return {
            customTopH: this.customTop,
            statusBarH: this.statusBar,
            customBarH: this.customBar
        };
    }
}
</script>
<style lang="scss">
.zz-customHeader_20200806 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background-color:#fff;
    /*  */
    .content {
        display:flex;
        height:100%;
        padding-left:30rpx;
    }
    .content_title {
        position:relative;
        flex:0 0 50%;
        max-width:50%;
        margin-top:8rpx;
        font-size:34rpx;
        line-height:44rpx;
        color:#000;
    }
}
</style>